<!-- Html代码-->
<template>
  <!--  只能有一个根标签  -->
  <div>
    <h1>{{message}}</h1>
    <!-- 1.跳转方式1: 超链接    超链接跳转到page1 to配置跳转的路径-->
    <router-link to="/page1?username=张三">超链接跳转页面1</router-link>
    <br>
    <router-link to="/page2?username=李四">超链接跳转页面2</router-link>
    <br>
    <button @click="toPage1">JS跳转页面1</button>
    <br>
    <button @click="toPage2">JS跳转页面2</button>
    <br>
    <router-link to="/student">学生管理</router-link>
    <br>
    <router-link to="/course">课程管理</router-link>
    <br>
    <router-link to="/grade">成绩管理</router-link>
    <br>
    <router-link to="/teacher">教师管理</router-link>
    <!--    路由视图，挂载子页面-->
    <router-view></router-view>
  </div>
</template>

<!-- Js代码-->
<script>

export default {
  name: "Index",
  data(){      // 定义数据
    return {
      message: "Hello Vue-Cli!!!",
    }
  },
  methods:{
    // 跳转方式2:使用javascript代码   跳转页面的方法
    toPage1() {
      // 路由跳转page1
      this.$router.push({path:'/page1',query:{username:'李四'}})
    },
    toPage2() {
      this.$router.push({path:'/page2'})
    }
  }
}

</script>

<!-- Css代码-->
<style scoped>

</style>